<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的知识库</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/knowledge.css">
</head>
<body>
<div class="container mt-4">
    <div class="row mb-3">
        <div class="col-md-6">
            <h2>我的知识库</h2>
        </div>
        <div class="col-md-6 text-right">
            <button class="btn btn-primary" data-toggle="modal" data-target="#createModal">
                新建知识库
            </button>
        </div>
    </div>

    <div class="row" id="knowledgeList">
        <!-- 动态加载知识库卡片 -->
    </div>
</div>

<!-- 新建知识库模态框 -->
<div class="modal fade" id="createModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">新建知识库</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="createForm">
                    <div class="form-group">
                        <label>名称</label>
                        <input type="text" class="form-control" id="kbName" required>
                    </div>
                    <div class="form-group">
                        <label>描述</label>
                        <textarea class="form-control" id="kbDesc" rows="3"></textarea>
                    </div>
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="kbPublic">
                        <label class="form-check-label">公开知识库</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="createKnowledge()">创建</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/knowledge.js"></script>
<script>
    $(document).ready(function() {
        loadKnowledgeBases();
    });
</script>
</body>
</html>